<template>
    <view class="content">
        <view class="top">
            <view class="price">
                ￥<text>{{ money }}</text>
            </view>
            <view>合计支付</view>
        </view>
        
        <view class="box">
            <view>支付方式</view>
            <view class="item flex" @click="choose(1)">
                <image src="../../static/icon/g_wx.png" class="icon"></image>
                <view class="u-flex-1 text-bold">微信支付</view>
                <image :src="payType == 1 ? '../../static/icon/g_choose.png' : '../../static/icon/g_choose2.png'" class="choose"></image>
            </view>
            
            <view class="item" v-if="service.public_company_name && !from">
                <view class="flex" @click="choose(9)">
                    <image src="../../static/icon/g_dg.png" class="icon"></image>
                    <view class="u-flex-1 text-bold">对公转账</view>
                    <image :src="payType == 9 ? '../../static/icon/g_choose.png' : '../../static/icon/g_choose2.png'" class="choose"></image>
                </view>
                <view class="info">
                    <view class="i-top">
                        <view class="i-t">
                            <view class="i-left">公司名称</view>
                            <view class="i-right">{{ service.public_company_name }}</view>
                        </view>
                        <view class="i-t">
                            <view class="i-left">纳税人识别号</view>
                            <view class="i-right">{{ service.public_tin }}</view>
                        </view>
                        <view class="i-t">
                            <view class="i-left">公司地址</view>
                            <view class="i-right">{{ service.public_company_address }}</view>
                        </view>
                        <view class="i-t">
                            <view class="i-left">公司电话</view>
                            <view class="i-right">{{ service.public_company_phone }}</view>
                        </view>
                        <view class="i-t">
                            <view class="i-left">开户行</view>
                            <view class="i-right">{{ service.public_bank }}</view>
                        </view>
                        <view class="i-t">
                            <view class="i-left">开户账号</view>
                            <view class="i-right">{{ service.public_bank_number }}</view>
                        </view>
                    </view>
                    <view class="i-down">
                        <view>请上传付款凭证</view>
                        <image :src="pic_url || '../../static/image/g_up.png'" class="up" @click="chooseImage"></image>
                    </view>
                </view>
            </view>
            
            <view class="item flex" v-if="!from && info.balance > 0" @click="choose(5)">
                <image src="../../static/icon/g_yu.png" class="icon"></image>
                <view class="u-flex-1 u-flex">
                    <view class="text-bold">余额支付</view>
                    <view class="yu">可用<text>￥{{ info.balance }}</text></view>
                </view>
                <image :src="payType == 5 ? '../../static/icon/g_choose.png' : '../../static/icon/g_choose2.png'" class="choose"></image>
            </view>
        </view>
        
        <view class="btn" @click="$noMultipleClicks(pay)">确认支付</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick: true,//连点
                payType: 1,//1-微信 5余额支付 9-对公打款
                money: 0,
                id: '',
                service: {},
                from: '',
                info: {},
                pic: '',
                pic_url: '',
                total: 0,
            };
        },
        onLoad(option) {
            // 充值时，只能微信支付
            if (option.from) {
                this.from = option.from
            }
            this.id = option.id
            this.money = option.money
            this.total = option.money
            
            this.getService()
            this.getInfo()
        },
        methods: {
            choose(num) {
                this.payType = num
                const balance = Number(this.info.balance) //余额
                if (num == 5) {
                    if (balance >= this.total) {
                        this.money = 0
                    } else {
                        this.money = (this.total - balance).toFixed(2)
                    }
                } else {
                    this.money = this.total
                }
            },
            
            pay() {
                if (this.payType == 9) {
                    if (!this.pic) {
                        this.$toast('请上传付款凭证')
                        return
                    }
                }
            	this.$ajax('repay', {
            		userToken: this.$getSync('userToken'),
            		id: this.id,
                    platform: 'JSAPI',//支付环境 网页 JSAPI app APP
            		pay_type: this.payType, //1-微信 2-支付宝 5余额支付 9-对公打款
                    pay_image_id: this.pic,//付款凭证
            	}).then(ret => {
            		if (ret.status == 0) {
                        if (ret.data.wxpay) {
                            this.payInfo = ret.data.wxpay
                            uni.requestPayment({
                            	provider: 'wxpay',
                            	timeStamp: this.payInfo.timeStamp,
                            	nonceStr: this.payInfo.nonceStr,
                            	package: this.payInfo.package,
                            	signType: 'MD5',
                            	paySign: this.payInfo.paySign,
                            	success: (res) => {
                                    this.$toast('支付成功');
                                    setTimeout(() => {
                                        uni.navigateBack({
                                            delta: 2
                                        })
                                    }, 500)
                            	},
                            	fail: (err) => {
                                    this.$toast('支付失败！');
                            	}
                            })
                        } else {
                            this.$toast('支付成功');
                            setTimeout(() => {
                                uni.navigateBack({
                                    delta: 2
                                })
                            }, 500)
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            chooseImage() {
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
                    success: (res) => {
                        this.$upLoadPic(res.tempFilePaths[0]).then(ret => {
                            console.log(ret)
                            this.pic = ret.data.id
                            this.pic_url = ret.data.attach_uri
                        });
                    }
                });
            },
            
            getInfo() {
            	this.$ajax('getInfo', {
            		userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.info = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            getService() {
            	this.$ajax('customerService', {
            		
            	}).then(ret => {
            		this.service = ret.data
            	});
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 50rpx 20rpx 20rpx;
    }
    .top{
        padding-bottom: 50rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .price{
        font-size: 42rpx;
        font-weight: bold;
    }
    .price>text{
        font-size: 66rpx;
    }
    
    .box{
        padding: 35rpx 30rpx 0;
        background-color: #fff;
        border-radius: 20rpx;
        font-size: 30rpx;
    }
    .flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .item{
        padding: 40rpx 0;
        border-bottom: 2rpx solid #f0f0f0;
    }
    .item:last-child{
        border-bottom: none;
    }
    .icon{
        width: 43rpx;
        height: 44rpx;
        margin-right: 15rpx;
    }
    .choose{
        width: 40rpx;
        height: 40rpx;
    }
    .yu{
        margin-left: 20rpx;
        padding: 10rpx 20rpx;
        background-color: #fff1f3;
        border-radius: 8rpx;
        font-size: 24rpx;
    }
    .yu>text{
        color: #f62a2a;
    }
    
    .info{
        padding-top: 30rpx;
    }
    .i-top{
        padding: 30rpx 25rpx 20rpx;
        background-color: #f5f5f5;
        border-radius: 15rpx;
    }
    .i-t{
        padding-bottom: 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .i-left{
        width: 165rpx;
        font-size: 24rpx;
        color: #656565;
    }
    .i-right{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
        font-size: 24rpx;
        color: #000;
    }
    .i-down{
        padding-top: 30rpx;
        font-size: 24rpx;
        color: #adadad;
    }
    .up{
        width: 150rpx;
        height: 150rpx;
        margin-top: 10rpx;
    }
    
    .btn{
    	font-size: 34rpx;
    	color: #FFFFFF;
    	text-align: center;
        padding: 25rpx;
    	background: #00734c;
        border-radius: 50rpx;
    	margin: 60rpx 0;
    }

</style>
